<template>
	<view class="note">
		<view class="note-section"></view>
		<view class="info">
			<u-cell-item class="info-cell_item" :title-style="titleStyle"
				bg-color="#ffffff" :title="$t('chat.chat_report')"
				@click="$goPage('/user/complaints')">
			</u-cell-item>
			
		</view>
	</view>
</template>

<script>
	import pageMixin from '@/utils/pageMixin';
	export default {
		mixins: [pageMixin],
		data() {
			return {
				pid: 0,
				uid: '',
				groupId: '',
				groupInfo: {},
				groupMemberList: [],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '到底了哦'
				},
				quitVisible: false,
				disbandVisable: false,
				titleStyle: {
					color: '#131313',
					fontSize: '32rpx',
				},
				textareaStyle: {
					color: '#131313',
					fontSize: '32rpx',
					width: '100%',
				},
				labelStyle: {
					width: '100%',
				},
				avatarStyle: {
					marginTop: '40rpx',
				},
				action: '',
				formData: {},
				fileList: [],

				oldGroupNotify: '',
			}
		},

		onLoad(option) {
			uni.setNavigationBarTitle({
				title: this.$t('chat.chat_group_info')
			})
		},
		onShow() {
		},
		components: {},
		computed: {
			i18n() {
				return this.$t('chat')
			}
		},
		methods: {
			init() {
				this.uid = this.vuex_user.uid;
				this.action = this.fileUploadUrl;
				this.formData = {
					catalog: 'avatar'
				};
				uni.$TUIKit.login({
					userID: this.vuex_user.timUserId,
					userSig: this.vuex_user.timUserSig
				}).then(() => {}).catch(() => {});
				this.getGroupMemberList();
			},
			getGroupMemberList() {
				let that = this;
				that.$http.get('/mgr/user/group/member/list/data', {
					gid: that.groupId
				}).then(res => {
					that.groupInfo = res.groupInfo;
					that.oldGroupNotify = res.groupInfo.GroupNotify;
					that.groupMemberList = res.groupMemberList;
					if (res.groupInfo.GroupAvatarImg != '') {
						that.fileList.push({
							url: res.groupInfo.GroupAvatarImg
						});
					}
				});
			},
			actQuit() {
				let that = this;
				that.quitVisible = false;
				let data = {
					gid: that.groupId,
					uid: that.vuex_user.uid
				};
				that.$http.post('/mgr/user/group/member/quit', data).then(res => {
					let promise = uni.$TUIKit.quitGroup(that.groupId);
					promise.then(function(imResponse) {
						console.log("groupID", imResponse.data.groupID); // 退出成功的群 ID
					}).catch(function(imError) {
						console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
					});
					uni.showToast({
						title: that.$t('chat.group_quit_success_notify')
					});
					setTimeout(function() {
						that.$u.route({
							type: 'back',
							delta: 2
						});
					}, 1000);
				});
			},
			actDisband() {
				let that = this;
				that.disbandVisible = false;
				that.$http.post('/mgr/user/group/disband', {
					gid: that.groupId
				}).then(res => {
					uni.showToast({
						title: that.$t('chat.group_disband_success_notify')
					});
					setTimeout(function() {
						that.$u.route({
							type: 'back',
							delta: 2
						});
					}, 1000);
				});
			},
			updateGroupName() {
				let that = this;
				let param = {
					gid: this.groupInfo.Gid,
					group_name: this.groupInfo.GroupName,
					group_avatar: this.groupInfo.GroupAvatar,
					group_notify: this.groupInfo.GroupNotify,
				};
				this.$http.post('/mgr/user/group/save', param).then(res => {
					if (that.groupInfo.GroupNotify != '' && that.groupInfo.GroupNotify != that.oldGroupNotify) {
						const message = uni.$TUIKit.createTextMessage({
							to: that.groupInfo.Gid.toString(),
							conversationType: 'GROUP',
							payload: {
								text: '【群公告】' + that.groupInfo.GroupNotify,
							}
						});
						uni.$TUIKit.sendMessage(message)
					}
					uni.showToast({
						title: that.$t('chat.group_update_success_notify'),
					});
					this.init();
				});
			},
			uploadSuccessCallback(data) {
				let that = this;
				if (data.data.filepath && data.data.filepath != '') {
					let param = {
						gid: this.groupInfo.Gid,
						group_name: this.groupInfo.GroupName,
						group_avatar: data.data.filepath,
					};
					this.$http.post('/mgr/user/group/save', param).then(res => {
						uni.showToast({
							title: that.$t('chat.group_upload_success_notify'),
						});
						this.init();
					});
				}
			},
			removeImgCallback() {
				let param = {
					gid: this.groupInfo.Gid,
					group_name: this.groupInfo.GroupName,
					group_avatar: '',
				};
				this.$http.post('/mgr/user/group/save', param).then(res => {
					this.init();
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.note {
		padding-bottom: 88rpx;
	}

	.note-section {
		clear: both;
		overflow: hidden;
		padding: 10rpx 0 50rpx;
		margin-bottom: 24rpx;
		background-color: #FFFFFF;
	}

	.note-item {
		float: left;
		box-sizing: border-box;
		padding: 0 10rpx;
		width: 20%;
		text-align: center;

		&_avatar {
			position: relative;
			margin: 50rpx auto 10rpx;
			width: 72rpx;
			height: 72rpx;
		}

		&_name {
			font-size: 32rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.note-footer {
		z-index: 999;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx 140rpx;

		.u-btn {
			color: #0089FF;
			background-color: #eee;
		}
	}

	.slot-content {
		padding: 30rpx 30rpx 0;
	}

	.info-cell_item_textarea {
		height: 150rpx;
		background-color: #ffffff;

		&.avatar {
			height: 132rpx;
		}

		&--text {
			color: #131313;
		}

		&--avatar {
			position: relative;
			width: 122rpx;
			height: 122rpx;
			margin-left: auto;
			padding: 10rpx;

			.u-upload {
				z-index: 999;
				position: absolute;
				top: 0;
				left: 0;
			}

			.u-list-item {
				margin: 0 ;
				opacity: 0;
			}
		}

		&--input {
			position: relative;
			width: 90%;
			margin-left: auto;
		}
	}

	.info-cell_item {
		height: 100rpx;
		background-color: #ffffff;

		&.avatar {
			height: 132rpx;
		}

		&--text {
			color: #131313;
		}

		&--avatar {
			position: relative;
			width: 122rpx;
			height: 122rpx;
			margin-left: auto;
			padding: 10rpx;

			.u-upload {
				z-index: 999;
				position: absolute;
				top: 0;
				left: 0;
			}

			.u-list-item {
				margin: 0 ;
				opacity: 0;
			}
		}

		&--input {
			position: relative;
			width: 60%;
			margin-left: auto;
		}
	}
</style>
